<template>
  <div style="height: 100%" class="workspace">
    <el-container ref="listWarp" style="height: 100%">
      <div class="left">
        <div class="title"><span></span>统计分析</div>
        <div class="statusList">
          <div
            class="item"
            :class="type === item.value ? 'activeItem' : ''"
            v-for="(item, index) in statusList"
            :key="index"
            @click="activeClick(item)"
          >
            <svg-icon
              :icon-class="item.icon"
              style="font-size: 13px; margin-right: 3px"
            />
            {{ item.label }}
          </div>
        </div>
      </div>
      <component :is="componentId" :title="title"></component>
    </el-container>
    
  </div>
</template>

<script>
import areaCom from "./components/areaCom.vue";
import equCom from "./components/equCom.vue";
import userCom from "./components/userCom.vue";
export default {
  components: { areaCom, equCom, userCom },
  data() {
    return {
      statusCurrent: "1",
      componentId: "areaCom",
      title: "区域巡检统计",
      totalRows: 0,
      pageSize: 20,
      currentPage: 1,
      tableData: [],
      statusList: [
        { value: "1", label: "区域巡检统计", icon: "dwsp" },
        { value: "2", label: "人员巡检统计", icon: "wysp" },
        { value: "3", label: "设备维修维护统计", icon: "csgwd" },
      ],
      search: [],
      loading: false,
      schoolList: [], // 校区
      areaList: [], // 区域
      type: "1",
      resultList: [
        {
          name: "正常",
          id: "1",
        },
        {
          name: "异常",
          id: "2",
        },
      ], // 检查结果
    };
  },
  methods: {
    activeClick(item) {
      this.type = item.value;
      this.title = item.label;
      switch (item.value) {
        case "1":
          this.componentId = "areaCom";
          break;
        case "2":
          this.componentId = "userCom";
          break;
        case "3":
          this.componentId = "equCom";
          break;
        default:
          break;
      }
      console.log('====================================');
      console.log(this.componentId);
      console.log('====================================');
    },
  },
  created() {},
};
</script>

<style lang="scss" scoped>
.workspace {
  .title {
    display: flex;
    align-items: center;
    column-gap: 8px;
    font-size: 16px;
    font-family: Alibaba PuHuiTi 2-65 Medium, Alibaba PuHuiTi 20;
    font-weight: normal;
    color: #1d2129;
    span {
      display: inline-block;
      width: 3px;
      height: 15px;
      background: #00b38b;
    }
    padding-bottom: 16px;
    border-bottom: 1px solid #eeeeee;
  }
  .left {
    width: 238px;
    background: #fff;
    margin-right: 10px;
    padding: 20px;

    .statusList {
      margin-top: 10px;
      .item {
        font-size: 14px;
        height: 42px;
        background: #fff;
        line-height: 42px;
        cursor: pointer;
        padding: 0 10px;
      }
      .activeItem {
        background: #e5f7f3;
        border-radius: 2px 2px 2px 2px;
        color: #00b38b;
      }
    }
  }
  .right {
    // padding: 20px;
    .selectList {
      display: flex;
      justify-content: space-between;
      .select {
        display: flex;
        column-gap: 10px;
      }
      .btns {
        display: flex;
        column-gap: 12px;
        div {
          width: 110px;
          height: 32px;
          border-radius: 2px 2px 2px 2px;
          font-size: 14px;
          font-family: PingFang SC-Regular, PingFang SC;
          font-weight: 400;
          color: #ffffff;
          display: flex;
          align-items: center;
          justify-content: center;
        }
        .pass {
          background: #00b38b;
        }
        .reject {
          background: #ff5c5e;
        }
      }
    }
  }
}
</style>
